<template>
  <div id="officialList">
    <h1 class="con-right-title">
      排行榜活动
    </h1>
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <!--上部搜索条件-->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮 -->
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:leaderBoardActivity:add'"
            type="warning"
            icon="el-icon-plus"
            @click="goActive('add')"
          >
            创建活动
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!--下部table-->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
          max-height="490"
          ref="table"
        >
          <el-table-column type="index" width="60" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="活动编号（ID）"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="activityDisplay.displayName"
            label="活动名称"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="activityListAuditingState"
            label="审核状态"
            min-width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              <template v-if="row.activityListAuditingState === null">
                -
              </template>
              <template v-else-if="row.activityListAuditingState === 'FAIL'">
                <template
                  v-if="
                    row.activityAuditing.oneAuditing.auditingState == 'FAIL'
                  "
                >
                  <span
                    class="tag-span danger"
                    @click="showRemark(row.activityAuditing.oneAuditing.remark)"
                    >未通过</span
                  >
                </template>
                <template
                  v-if="
                    row.activityAuditing.twoAuditing.auditingState == 'FAIL'
                  "
                >
                  <span
                    class="tag-span danger"
                    @click="showRemark(row.activityAuditing.twoAuditing.remark)"
                    >未通过</span
                  >
                </template>
              </template>
              <template v-else>
                <span
                  class="tag-span"
                  :class="
                    row.activityListAuditingState | filterClass('checkStatu')
                  "
                  >{{
                    row.activityListAuditingState | filterName('checkStatu')
                  }}</span
                ></template
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="secondStatus"
            label="提交状态"
            align="center"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span
                v-if="row.state"
                class="tag-span"
                :class="
                  (row.state !== 'UNSUBMITTED' ? 'SUBMIT' : row.state)
                    | filterClass('submitStatu')
                "
                >{{
                  (row.state !== 'UNSUBMITTED' ? 'SUBMIT' : row.state)
                    | filterName('submitStatu')
                }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="offline"
            label="上线状态"
            align="center"
            min-width="200"
          >
            <template slot-scope="{ row }">
              {{ filterOffline(row.offline, row.state) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="activityInfo.createdDate"
            label="创建时间"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="createdUserNickname"
            label="创建人"
          ></el-table-column>
          <el-table-column label="操作" fixed="right" width="220">
            <template slot-scope="{ row }">
              <template v-permission="'wh:system:leaderBoardActivity:submit'">
                <el-button
                  v-if="row.state === 'UNSUBMITTED'"
                  type="text"
                  @click="handelsubmit(row.id)"
                >
                  提交
                </el-button>
              </template>

              <el-button
                v-if="isShowEdit(row)"
                type="text"
                @click="goActive('edit', row.id)"
              >
                编辑
              </el-button>
              <el-button type="text" @click="goActive('detail', row.id)">
                查看详情
              </el-button>
              <template v-permission="'wh:system:leaderBoardActivity:delete'">
                <el-button
                  v-if="row.state !== 'ONGOING' || row.offline"
                  type="text"
                  @click="handeldelete(row.id)"
                >
                  删除
                </el-button>
              </template>
              <el-button
                v-if="row.state === 'ONGOING' && row.offline === false"
                type="text"
                @click="downLine(row.id)"
              >
                下线
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankingList } from '@/api/activeManagement/templatePage' // 接口
import topSearch from '@component/activeManagement/common/templatePage/topSearch' // 上部搜索条件
import {
  delActive,
  offline,
  submitActive,
  getId
} from '@component/activeManagement/common/js/lableApi' // 导入公用方法
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'rankingList',
  msg: '排行榜活动-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      loading: false,
      total: 0,
      formInline: {
        // 搜索条件
        auditingState: '', // 审核状态,默认全部
        state: '', // 提交状态,默认全部
        activityState: '', // 上线状态
        searchContent: '', //查询内容
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // table内容
      tableData: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getRankingList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /*返回上线状态-中文*/
    filterOffline(value, state) {
      if (value == true) {
        return '已下线'
      }
      if (state == 'ONGOING') {
        return '已上线'
      }
      if (state == 'NOT_STARTED') {
        return '未上线'
      }
      if (state == 'OVER') {
        //已上线
        return '已结束'
      }
      return '-'
    },
    /*审核状态未通过，点击弹出信息*/
    showRemark(str) {
      this.$alert(`${str}`, '系统提示', {
        dangerouslyUseHTMLString: true
      })
    },
    /*是否显示编辑按钮*/
    isShowEdit(row) {
      if (
        row.activityAuditing.oneAuditing.auditingState === 'UNAUDITED' ||
        (row.activityAuditing.oneAuditing.auditingState === 'PASS' &&
          row.activityAuditing.twoAuditing.auditingState != 'PASS')
      ) {
      } else if (!row.offline) {
        return true
      }
      return false
    },
    // 提交
    async handelsubmit(id) {
      this.$confirm('确定提交该条排行榜活动信息吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let suc = await submitActive(id)
          if (suc) {
            this.searchList()
          }
        })
        .catch(() => {})
    },
    /* 进入二级页面 （创建活动、编辑、查看详情）*/
    async goActive(type, id = '') {
      let name = ''
      switch (type) {
        case 'add': //新增
          id = await getId('RANKING_LIST_ACTIVITY')
          name = 'wh:activeManagement:rankingList:createActivities'
          break
        case 'edit': //编辑
          name = 'wh:activeManagement:rankingList:editRankingActivities'
          break
        case 'detail': //查看详情
          name = 'wh:activeManagement:rankingList:checkRankingActivities'
          break
      }
      this.$router.push({
        name,
        query: {
          id: id
        }
      })
    },
    // 删除
    async handeldelete(id) {
      this.$confirm('确定删除该条排行榜活动信息吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let suc = await delActive(id)
          if (suc) {
            this.searchList()
          }
        })
        .catch(() => {})
    },
    /*下线*/
    async downLine(id) {
      this.$confirm('当前活动正在线上进行中，确定要强制下线吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let suc = await offline(id)
          if (suc) {
            this.searchList()
          }
        })
        .catch(() => {})
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>

<style lang="less">
.tag-success {
  background: #1dc8a4;
}
</style>
